<html>
<head>
  <title>VexFlow - HTML5 Music Engraving</title>
  <link href='https://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT|Yanone+Kaffeesatz|Tangerine'
   rel='stylesheet' type='text/css'>
  <link href="https://www.vexflow.com/vextab/tabdiv.css" media="screen" rel="Stylesheet" type="text/css" />
  <link href="https://www.vexflow.com/vextab/style.css" media="screen" rel="Stylesheet" type="text/css" />

  <!-- VexFlow Compiled Source -->
  <script src="../build/vexflow/vexflow-debug.js"></script>
  <!-- VexFlow 1.2.23 built on 2014-11-25. -->
  <script src="vextab/support/vexflow-min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script src="https://www.vexflow.com/support/tabdiv-debug.js"></script>
</head>

<body>
  <div class="vex">
    <a href="https://vexflow.com/vextab/">VexTab</a> |
    <a href="https://0xfe.blogspot.com">0xfe</a>
  </div>

  <div class="header">
    <h1>VexFlow</h1>
    <div class="main">
      <b>Music Engraving in JavaScript and HTML5</b>
    </div>
    v2.0 by <a href="https://0xfe.blogspot.com">0xfe</a>.
  </div>

  <div class="content">
    <h2>What is VexFlow?</h2>

    <div class="description">
      VexFlow is an open-source online music notation rendering API. It is written
      completely in JavaScript, and runs right in the browser. VexFlow supports
      HTML5 Canvas and SVG.
      <p/>
      The score below was rendered in your browser.
    </div>

    <div style="width:680; margin-left: auto; margin-right: auto;">
    <div class="vex-tabdiv"
      width=700 scale=0.9 editor="false"
      editor_width=640 editor_height=230>options space=20
tabstave notation=true key=A time=4/4
notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 |
notes :8 t12p7/4 s5s3/4 :8 3s:16:5-7/5 :h p5/4
text :w, |#segno, ,|, :hd, , #tr


options space=25
tabstave notation=true
notes :q (5/4.5/5) (7/4.7/5)s(5/4.5/5) ^3^
notes :8 7-5/4 $.a./b.$ (5/4.5/5)h(7/5) =:|
notes :8 (12/5.12/4)ds(5/5.5/4)u 3b4/5
notes :h (5V/6.5/4.6/3.7/2) $.italic.let ring$ =|=
text :h, ,.font=Times-12-italic, D.S. al coda, |#coda
text :h, ,.-1, .font=Arial-14-bold,A13
text ++, .23, #f
</div>
    <p/>
    <h2>Where Do I Start?</h2>
    <div class="docs">
      If you're not a programmer, there are many ways to use VexFlow to create, share, or publish your music online:
      <p/>
      <ul>
        <li>The <a href="https://chrome.google.com/webstore/detail/vextab-music-notation/pjggkphnejbllmmkmmgibonkbbhfjnkk">VexTab Google Docs add-on</a> lets you add music notation right in your Google Documents.</li>
        <li>You can use the <a href="https://chrome.google.com/webstore/detail/npcffdibegeppkebphaghnpkcjcpopjf">VexTab Chrome Extension</a> to write and share musical snippets hosted on <a href="https://imgur.com">imgur</a> right from your browser.</li>
        <li>The <a href="https://www.vexflow.com/vextab/playground/">VexTab Playground</a>
        is a simple online application to quickly create and post music notation to <a href="https://imgur.com">imgur</a>.
      </ul>
      <p/>
      If you're a programmer interested in rendering music notation in your
      own applications, take a look at
    <a href="https://github.com/0xfe/vexflow/wiki/Tutorial">The VexFlow Tutorial</a>.
    </div>


    <p/>
    <h2>Features</h2>
    <div class="docs">
      It sings, it dances, it does your dishes. Actually it does none of that.
      But it can render a mean score.

      <p/>Have a look
      at the <a href="http://www.vexflow.com/tests/">tests</a> page for a comprehensive list of features and
      the <a href="./api/index.html">API</a> page which documents the programming interface.
    </div>

    <h2>What is VexTab?</h2>
    <div class="description">
      <a href="https://vexflow.com/vextab/">VexTab</a> is an easy-to-use
      language to quickly create, edit, and render standard notation and guitar
      tablature.
      <p/>
      Follow the tutorial on the <a href="vextab/tutorial.html">VexTab Tutorial</a> page
      to get started using VexTab.
    </div>

    <h2>The Code</h2>
    <div class="description">
      VexFlow is distributed under the MIT license, and all the code is
      available at the <a href="https://github.com/0xfe/vexflow">VexFlow GitHub
        Repository</a>.

      <p/>
      VexTab is an open specification and the reference implementation is
      open source. This implementation is free for non-commercial use. See details
      at the <a href="https://github.com/0xfe/vextab">VexTab GitHub
        Repository</a>.
    </div>

    <h2>More Stuff</h2>
    <div class="description">
      We're always building and experimenting with new things related to music
      and audio on the web. Try these out:
      <p/>
      <ul>
        <li><a href="https://vexflow.com/vexwarp/">VexWarp</a> - An online tool for slowing down, stretching, pitch shifting, and looping music and audio. Great for practising and transcribing.</li>
        <li><a href="https://chrome.google.com/webstore/detail/vexwarp/nkdmbkieeegbiockljbbebpdafnbckfj">VexWarp Chrome App</a> - An offline version of VexWarp bundled as a Google Chrome Application.</li>
        <li><a href="https://vexflow.com/vexchords/">VexChords</a> - Guitar Chord charts rendered right in the browser, with source code.</li>
        <li><a href="https://chrome.google.com/webstore/detail/vextab-music-notation/npcffdibegeppkebphaghnpkcjcpopjf">VexTab Chrome Extension</a>
          - Paste music notation in your blog and forum posts, documents, and messages.</li>
      </ul>
    </div>

    <h2>Stay in Touch</h2>
    Keep up with changes at
    <a href="https://twitter.com/11111110b">@11111110b</a>,
    <a href="https://0xfe.blogspot.com">the 0xFE blog</a>.
  </div>
<script>
 var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-8346562-6']);
  _gaq.push(['_setDomainName', 'vexflow.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</body>
</html>
